<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>MonkeyCMS</title>
    <link type="text/css" rel="stylesheet" href="statics/css/monkey.css"/>
    <link type="text/css" rel="stylesheet" href="statics/css/frame.css"/>
    <script type="text/javascript" src="statics/js/jquery.min.js"></script>
    <script type="text/javascript" src="statics/js/prettify.js"></script>
    <!--powerfloat-->
    <script type="text/javascript" src="statics/js/jquery.powerfloat.min.js"></script>
    <link type="text/css" rel="stylesheet" href="statics/css/powerFloat.css"/>
    <script type="text/javascript" src="statics/js/monkey.js"></script>

</head>

<body>
<!--page_header-->
<div class="page_header">
    <h3>下拉按钮</h3>

    <p>通用下拉按钮，需结合按钮(u_button)、图标(iconfont)的UI组件使用，使用 <code><a href="http://www.zhangxinxu.com/wordpress/?p=1328"
                                                              target="_blank">PowerFloat</a></code> JQuery组件</p>
</div>
<!--/page_header-->

<!--page_main-->
<div class="page_main">

<h4>下拉按钮</h4>

<div class="u_button_dropdown">
    <a class="u_button u_button_orange u_button_middle u_dbutton u_dbutton_orange">
        <span class="u_dbutton_self">下拉菜单</span>
        <i class="u_dbutton_arrow iconfont" title="下三角形">&#xf0d7;</i>
    </a>
    <ul class="u_button_dropdown_middle">
        <li class="u_button_dropdown_item"><a href="#">菜单一</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单二</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单三</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单四</a></li>
    </ul>
</div>

<div class="u_button_dropdown">
    <a class="u_button u_button_gray u_button_middle u_dbutton u_dbutton_gray">
        <span class="u_dbutton_self">下拉菜单</span>
        <i class="u_dbutton_arrow iconfont" title="下三角形">&#xf0d7;</i>
    </a>
    <ul class="u_button_dropdown_middle">
        <li class="u_button_dropdown_item"><a href="#">菜单一</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单二</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单三</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单四</a></li>
    </ul>
</div>

<br/>
<br/>

	<pre class="prettyprint linenums">
&lt;div class="u_button_dropdown"&gt;
  &lt;a class="u_button u_button_orange u_button_middle u_dbutton u_dbutton_orange"&gt;
    &lt;span class="u_dbutton_self"&gt;下拉菜单&lt;/span&gt;
    &lt;i class="u_dbutton_arrow iconfont" title="下三角形"&gt;&amp;#xf0d7;&lt;/i&gt;
  &lt;/a&gt;
  &lt;ul class="u_button_dropdown_middle"&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;&lt;/li&gt;   
  &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="u_button_dropdown"&gt;
  &lt;a class="u_button u_button_gray u_button_middle u_dbutton u_dbutton_gray"&gt;
    &lt;span class="u_dbutton_self"&gt;下拉菜单&lt;/span&gt;
    &lt;i class="u_dbutton_arrow iconfont" title="下三角形"&gt;&amp;#xf0d7;&lt;/i&gt;
  &lt;/a&gt;
  &lt;ul class="u_button_dropdown_middle"&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;&lt;/li&gt;   
  &lt;/ul&gt;
&lt;/div&gt;</pre>

<h4>不同尺寸的下拉按钮</h4>

<div class="u_button_dropdown">
    <a class="u_button u_button_orange u_button_large u_dbutton u_dbutton_orange">
        <span class="u_dbutton_self">下拉菜单</span>
        <i class="u_dbutton_arrow iconfont" title="下三角形">&#xf0d7;</i>
    </a>
    <ul class="u_button_dropdown_large">
        <li class="u_button_dropdown_item"><a href="#">菜单一</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单二</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单三</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单四</a></li>
    </ul>
</div>

<div class="u_button_dropdown">
    <a class="u_button u_button_orange u_button_middle u_dbutton u_dbutton_orange">
        <span class="u_dbutton_self">下拉菜单</span>
        <i class="u_dbutton_arrow iconfont" title="下三角形">&#xf0d7;</i>
    </a>
    <ul class="u_button_dropdown_middle">
        <li class="u_button_dropdown_item"><a href="#">菜单一</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单二</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单三</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单四</a></li>
    </ul>
</div>

<div class="u_button_dropdown">
    <a class="u_button u_button_orange u_button_small u_dbutton u_dbutton_orange">
        <span class="u_dbutton_self">下拉菜单</span>
        <i class="u_dbutton_arrow iconfont" title="下三角形">&#xf0d7;</i>
    </a>
    <ul class="u_button_dropdown_small">
        <li class="u_button_dropdown_item"><a href="#">菜单一</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单二</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单三</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单四</a></li>
    </ul>
</div>

<div class="u_button_dropdown">
    <a class="u_button u_button_gray u_button_large u_dbutton u_dbutton_gray">
        <span class="u_dbutton_self">下拉菜单</span>
        <i class="u_dbutton_arrow iconfont" title="下三角形">&#xf0d7;</i>
    </a>
    <ul class="u_button_dropdown_large">
        <li class="u_button_dropdown_item"><a href="#">菜单一</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单二</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单三</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单四</a></li>
    </ul>
</div>

<div class="u_button_dropdown">
    <a class="u_button u_button_gray u_button_middle u_dbutton u_dbutton_gray">
        <span class="u_dbutton_self">下拉菜单</span>
        <i class="u_dbutton_arrow iconfont" title="下三角形">&#xf0d7;</i>
    </a>
    <ul class="u_button_dropdown_middle">
        <li class="u_button_dropdown_item"><a href="#">菜单一</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单二</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单三</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单四</a></li>
    </ul>
</div>

<div class="u_button_dropdown">
    <a class="u_button u_button_gray u_button_small u_dbutton u_dbutton_gray">
        <span class="u_dbutton_self">下拉菜单</span>
        <i class="u_dbutton_arrow iconfont" title="下三角形">&#xf0d7;</i>
    </a>
    <ul class="u_button_dropdown_small">
        <li class="u_button_dropdown_item"><a href="#">菜单一</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单二</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单三</a></li>
        <li class="u_button_dropdown_item"><a href="#">菜单四</a></li>
    </ul>
</div>

<br/>
<br/>

	<pre class="prettyprint linenums">
&lt;div class="u_button_dropdown"&gt;
  &lt;a class="u_button u_button_orange u_button_large u_dbutton u_dbutton_orange"&gt;
    &lt;span class="u_dbutton_self"&gt;下拉菜单&lt;/span&gt;
    &lt;i class="u_dbutton_arrow iconfont" title="下三角形"&gt;&amp;#xf0d7;&lt;/i&gt;
  &lt;/a&gt;
  &lt;ul class="u_button_dropdown_large"&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;&lt;/li&gt;   
  &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="u_button_dropdown"&gt;
  &lt;a class="u_button u_button_orange u_button_middle u_dbutton u_dbutton_orange"&gt;
    &lt;span class="u_dbutton_self"&gt;下拉菜单&lt;/span&gt;
    &lt;i class="u_dbutton_arrow iconfont" title="下三角形"&gt;&amp;#xf0d7;&lt;/i&gt;
  &lt;/a&gt;
  &lt;ul class="u_button_dropdown_middle"&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;&lt;/li&gt;   
  &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="u_button_dropdown"&gt;
  &lt;a class="u_button u_button_orange u_button_small u_dbutton u_dbutton_orange"&gt;
    &lt;span class="u_dbutton_self"&gt;下拉菜单&lt;/span&gt;
    &lt;i class="u_dbutton_arrow iconfont" title="下三角形"&gt;&amp;#xf0d7;&lt;/i&gt;
  &lt;/a&gt;
  &lt;ul class="u_button_dropdown_small"&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;&lt;/li&gt;   
  &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="u_button_dropdown"&gt;
  &lt;a class="u_button u_button_gray u_button_large u_dbutton u_dbutton_gray"&gt;
    &lt;span class="u_dbutton_self"&gt;下拉菜单&lt;/span&gt;
    &lt;i class="u_dbutton_arrow iconfont" title="下三角形"&gt;&amp;#xf0d7;&lt;/i&gt;
  &lt;/a&gt;
  &lt;ul class="u_button_dropdown_large"&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;&lt;/li&gt;   
  &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="u_button_dropdown"&gt;
  &lt;a class="u_button u_button_gray u_button_middle u_dbutton u_dbutton_gray"&gt;
    &lt;span class="u_dbutton_self"&gt;下拉菜单&lt;/span&gt;
    &lt;i class="u_dbutton_arrow iconfont" title="下三角形"&gt;&amp;#xf0d7;&lt;/i&gt;
  &lt;/a&gt;
  &lt;ul class="u_button_dropdown_middle"&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;&lt;/li&gt;   
  &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="u_button_dropdown"&gt;
  &lt;a class="u_button u_button_gray u_button_small u_dbutton u_dbutton_gray"&gt;
    &lt;span class="u_dbutton_self"&gt;下拉菜单&lt;/span&gt;
    &lt;i class="u_dbutton_arrow iconfont" title="下三角形"&gt;&amp;#xf0d7;&lt;/i&gt;
  &lt;/a&gt;
  &lt;ul class="u_button_dropdown_small"&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单一&lt;/a&gt;&lt;/li&gt;
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单二&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单三&lt;/a&gt;&lt;/li&gt;   
    &lt;li class="u_button_dropdown_item"&gt;&lt;a href="#"&gt;菜单四&lt;/a&gt;&lt;/li&gt;   
  &lt;/ul&gt;
&lt;/div&gt;</pre>

</div>
<!--/page_main-->
</body>
</html>